<template>
    <view class="container">
        <!--tabbar-->
        <!-- <view class="tui-tabbar">
            <block v-for="(item, index) in tabbar" :key="index">
                <view
                    class="tui-tabbar-item"
                    :class="[tabCur == index ? 'tui-item-active' : '']"
                    :data-index="index"
                    @tap="tabbarSwitch"
                >
                    <view :class="[index == 0 ? 'tui-ptop-4' : '']">
                        <tui-icon
                            :name="
                                tabCur == index
                                    ? item.icon + '-fill'
                                    : item.icon
                            "
                            :color="tabCur == index ? '#E41F19' : '#666'"
                            :size="item.size"
                        ></tui-icon>
                    </view>
                    <view class="tui-scale">{{ item.text }}</view>
                </view>
            </block>
        </view> -->
        <!--tabbar-->

        <view class="tui-bg-box">
            <image src="../../static/login_bg.png" class="tui-bg-img"></image>
            <image src="/static/image/login_logo.png" class="tui-photo"></image>
            <view class="tui-login-name">{{ shopInfo.name }}</view>
        </view>
        <form>
            <view class="tui-login-from">
                <view class="tui-line-cell">
                    <tui-icon
                        name="mobile"
                        :size="20"
                        color="#ff4900"
                    ></tui-icon>
                    <input
                        v-if="shopId != 500"
                        placeholder-class="phcolor"
                        class="tui-input"
                        placeholder="请输入手机号码"
                        maxlength="11"
                        v-model="phone"
                        type="number"
                    />
                    <input
                        v-if="shopId == 500"
                        placeholder-class="phcolor"
                        class="tui-input"
                        placeholder="请输入手机号码或账号"
                        v-model="phone"
                        type="text"
                    />
                </view>
                <view class="tui-line-cell">
                    <tui-icon name="pwd" :size="20" color="#ff4900"></tui-icon>
                    <input
                        placeholder-class="phcolor"
                        class="tui-input"
                        placeholder="登录密码"
                        maxlength="20"
                        v-model="pwd"
                        type="password"
                    />
                </view>

                <button
                    type="warn"
                    class="btn-warning tui-btn-submit"
                    hover-class="btn-hover"
                    form-type="submit"
                    @click="doLogin()"
                >
                    登录
                </button>
                <view
                    class="tui-protocol"
                    hover-class="opcity"
                    :hover-stay-time="150"
                >
                    <text class="tui-protocol-gray"
                        >手机号后续可作为唯一登录凭证</text
                    >
                </view>

                <view
                    class="tui-protocol"
                    hover-class="opcity"
                    :hover-stay-time="150"
                    @click="goReg()"
                >
                    <text class="tui-protocol-blue">没有账号?注册一个</text>
                </view>
                <view
                    class="tui-protocol"
                    hover-class="opcity"
                    :hover-stay-time="150"
                    @click="goFindPwd()"
                >
                    <text class="tui-protocol-blue">忘记密码?找回密码</text>
                </view>
            </view>
        </form>

        <footerMenu :tabCur="2" />
    </view>
</template>

<script>
import footerMenu from "@/components/footer-menu.vue";
import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue";
import tuiButton from "@/components/thorui/tui-button/tui-button";
const util = require("../../utils/util.js");
export default {
    components: {
        footerMenu,
        tuiIcon,
        tuiButton,
    },
    data() {
        return {
            disabled: false,
            btnText: "获取验证码",
            phone: "",
            type: "warning",
            code: "",
            pwd: "",
            shopId: 0,
            shopInfo: [],

            //底部导航栏tabbar
            tabCur: 2,
            tabbar: [
                { icon: "home", text: "首页", size: 21 },
                { icon: "service", text: "发现", size: 24 },
                { icon: "people", text: "我的", size: 24 },
            ],
        };
    },
    methods: {
        //底部导航栏tabbar
        tabbarSwitch: function (e) {
            let index = e.currentTarget.dataset.index;
            this.tabCur = index;
            if (index == 0) {
                uni.switchTab({ url: "/pages/site/index" });
            } else if (index == 1) {
                uni.switchTab({ url: "/pages/shop/index" });
            } else {
                uni.switchTab({ url: "/pages/my/index" });
            }
        },

        goReg: function () {
            uni.navigateTo({
                url: "/pages/my/reg",
            });
        },

        goFindPwd: function () {
            uni.navigateTo({
                url: "/pages/my/find-pwd",
            });
        },

        goLogin: function () {
            uni.navigateTo({
                url: "/pages/my/login",
            });
        },

        //得到商户基本信息
        getShopBaseInfo: function () {
            uni.request({
                url: this.$apiUrl + "/api/shop/baseInfo",
                header: {
                    shopId: uni.getStorageSync("shopId"),
                },
                success: (res) => {
                    this.shopInfo = res.data["data"];
                },
            });
        },

        //点击登录
        doLogin: function () {
            let phone = this.phone;
            let pwd = this.pwd;
            if (util.isNullOrEmpty(phone)) {
                this.tui.toast("请输入手机号码");
                return;
            }
            if (util.isNullOrEmpty(pwd)) {
                this.tui.toast("请输入密码");
                return;
            }

            //绑定手机号
            uni.request({
                url: this.$apiUrl + "/api/user/login",
                header: {
                    userId: uni.getStorageSync("userId"),
                    userToken: uni.getStorageSync("userToken"),
                    shopId: uni.getStorageSync("shopId"),
                },
                data: {
                    phone: this.phone,
                    pwd: this.pwd,
                },
                success: (res) => {
                    let resErr = res.data["error"];
                    let resMsg = res.data["msg"];
                    if (resErr == 0) {
                        let resData = res.data["data"];
                        let userId = resData.user_id;
                        let userToken = resData.user_token;
                        let shopId = resData.shop_id;

                        uni.setStorageSync("userId", userId);
                        uni.setStorageSync("userToken", userToken);
                        uni.setStorageSync("shopId", shopId);
                        uni.setStorageSync("hasLogin", 1);

                        //	this.tui.toast("手机号绑定成功", 2000, true);
                        setTimeout(() => {
                            uni.switchTab({ url: "/pages/my/index" });
                            //	uni.navigateBack();
                        }, 500);
                    } else {
                        this.tui.toast(resMsg, 2000, false);
                    }
                },
            });
        },
    },

    onLoad: function (options) {
        this.shopId = uni.getStorageSync("shopId");
        this.getShopBaseInfo();
    },
};
</script>

<style>
/*tabbar*/
.tui-tabbar {
    width: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 99999;
    background: #fff;
    height: 100rpx;
    left: 0;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
}
.tui-safearea-bottom {
    width: 100%;
    height: env(safe-area-inset-bottom);
}
.tui-tabbar::before {
    content: "";
    width: 100%;
    border-top: 1rpx solid #d9d9d9;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.tui-tabbar-item {
    flex: 1;
    width: 25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    font-size: 24rpx;
    color: #666;
    height: 80rpx;
}
.tui-ptop-4 {
    padding-top: 4rpx;
}
.tui-scale {
    font-weight: bold;
    transform: scale(0.8);
    transform-origin: center 100%;
    line-height: 30rpx;
}
.tui-item-active {
    color: #e41f19 !important;
}
/*tabbar*/

page {
    background: #fff;
}

.tui-bg-box {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding-top: 44upx;
}

.tui-photo {
    height: 200upx;
    width: 200upx;
    display: block;
    margin: 10upx auto 0 auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

.tui-login-name {
    width: 375upx;
    height: 40upx;
    font-size: 30upx;
    color: #fff;
    margin: 36upx auto 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.tui-bg-img {
    width: 100%;
    height: 346upx;
    display: block;
    position: absolute;
    top: 0;
}

.tui-login-from {
    width: 100%;
    padding: 100upx 104upx 0 104upx;
    box-sizing: border-box;
}

.tui-input {
    font-size: 32upx;
    flex: 1;
    display: inline-block;
    padding-left: 32upx;
    box-sizing: border-box;
    overflow: hidden;
}

.tui-line-cell {
    padding: 27upx 0;
    display: -webkit-flex;
    display: flex;
    -webkiit-align-items: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.tui-line-cell::after {
    content: "";
    position: absolute;
    border-bottom: 1upx solid #e0e0e0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 0;
}

.tui-top28 {
    margin-top: 28upx;
}

.tui-btn-class {
    width: 196upx !important;
    height: 54upx !important;
    border-radius: 27upx !important;
    font-size: 28upx !important;
    padding: 0 !important;
    line-height: 54upx !important;
}

.tui-btn-submit {
    margin-top: 100upx;
}

.tui-protocol {
    color: #333;
    font-size: 26rpx;
    text-align: center;
    width: 100%;
    margin-top: 60rpx;
}

.tui-protocol-red {
    color: #f54f46;
}

.tui-protocol-blue {
    color: #007aff;
}
</style>
